<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" :footershow="false" width="1050px" :clickModalClose="true"
			@confirm="handleSubmit" @close="handleClose">
			<div class="flex" style="height: 350px;">
				<div class="flex-1" style="height: 350px;overflow-y: scroll;">
					<el-tree :data="treelist" node-key="id" default-expand-all :expand-on-click-node="false"
						:props="defaultProps" @node-click="ontreeclick" />
				</div>
				<div class="flex-1" style="border-left: 1px solid rgb(231 230 230);padding: 20px;border-radius: 5px;">
					<el-form ref="formRef" :model="formData" label-width="80px" label-position="left" :rules="formRules">
						<!-- 账号输入框 -->
						<el-form-item label="ID">
							<el-input v-model="formData.id" :disabled="true" placeholder="请输入账号">
							</el-input>
						</el-form-item>
						<el-form-item label="pid">
							<el-input v-model="formData.pid" placeholder="请输入账号">
							</el-input>
						</el-form-item>
						<el-form-item label="名称">
							<el-input v-model="formData.name" placeholder="请输入账号">
							</el-input>
						</el-form-item>
						<el-form-item label="编码">
							<el-input v-model="formData.no" placeholder="请输入账号">
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="success" @click="append(formData)">新建</el-button>
							<el-button type="primary" @click="submit(formData)">保存</el-button>
							<el-button type="danger" @click="remove(formData)">删除</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</popup>
	</div>
</template>
<script lang="ts" setup>
	import {
		adminLists,
		adminAdd,
		adminEdit,
		adminDelete
	} from '@/api/materials/list'
	import feedback from '@/utils/feedback'
	import type {
		FormInstance
	} from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import {
		roleLists
	} from '@/api/perms/role'
	import {
		deptLists
	} from '@/api/org/department'
	import {
		jobsLists
	} from '@/api/org/post'
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef < FormInstance > ()
	const popupRef = shallowRef < InstanceType < typeof Popup >> ()
	const mode = ref('add')
	const popupTitle = computed(() => {
		return mode.value == 'edit' ? '编辑分类' : '编辑分类'
	})
	const defaultProps = {
		children: 'children',
		label: 'name',
	}
	const formData = reactive({
		name: '',
		id: '',
		no: '',
		pid: '',
	})
	const treelist = ref([])
	interface Tree {
		id: number
		label: string
		children ? : Tree[]
	}
	let id = 1000
	const show = ref(false)
	const ontreeclick = (data: Tree) => {
	
		formData.id = data.id
		formData.name = data.name
		formData.no = data.no
		formData.pid = data.pid
	}

	const append = (data: Tree) => {
	
		let datas = {
			pid: data.pid,
			name: data.name,
			no: data.no
		}
		adminAdd(datas).then((res: any) => {
			if (res.code == 1) {
				feedback.msgSuccess(res.msg)
			} else {
			}
		})
		// nextTick()
		setTimeout(() => {
			getRoleList()
		}, 300)

	}

	const remove = (data: Tree) => {
		adminDelete({
			id: data.id
		}).then((res: any) => {
			if (res.code == 1) {
				feedback.msgSuccess(res.msg)
			} else {
				
			}
		})
		setTimeout(() => {
			getRoleList()
		}, 300)
	}
	const submit = (data: Tree) => {
		adminEdit(data).then((res: any) => {
			if (res.code == 1) {
				feedback.msgSuccess(res.msg)
			} else {
				
			}
		})
		setTimeout(() => {
			getRoleList()
		}, 300)
	}
	const formRules = reactive({
		title: [{
			required: true,
			message: '请输入计量单位',
			trigger: ['blur']
		}],
	})
	const options = reactive({
		role: [] as any[],
		dept: [] as any[],
		jobs: [] as any[]
	})

	const getOptions = () => {
		roleLists({
			page_type: 0
		}).then((data: any) => {
			options.role = data.lists
		})
		deptLists({
			page_type: 0
		}).then((data: any) => {
			options.dept = data
		})
		jobsLists({
			page_type: 0
		}).then((data: any) => {
			options.jobs = data.lists
		})
	}

	const handleSubmit = async () => {
		await formRef.value?.validate()
		mode.value == 'edit' ? await adminEdit(formData) : await adminAdd(formData)
		popupRef.value?.close()
		emit('success')
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	const setFormData = (data: Record < any, any > ) => {
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}
		formRules.password = []
		formRules.password_confirm = []
	}
	const getRoleList = () => {
		adminLists().then((res: any) => {
			treelist.value = res
		})
	}
	const handleClose = () => {
		emit('close')
	}

	getOptions()

	defineExpose({
		open,
		setFormData
	})
	onMounted(() => {
		getRoleList()
	})
</script>
<style lang="scss" scoped>
	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width: 12px;
	}

	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 10px;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(255, 0, 0, 0.4);
	}
</style>
